<template xmlns:el-col="http://www.w3.org/1999/html">
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-row>
          <el-form-item label="疑点编号:">
            <el-input v-model="query.pointCode" clearable placeholder="疑点编号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目编号:">
            <el-input v-model="query.projectCode" clearable placeholder="项目编号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="query.projectName" clearable placeholder="项目名称" size="small"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button :loading="loading" icon="el-icon-search" size="small" type="primary" @click="onSearch">搜索</el-button>
            <el-button :loading="loading" icon="el-icon-delete" size="small" @click="searchReset">清空</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn-operate">
        <el-button icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">
          形成疑点
        </el-button>
      </div>
      <el-table v-loading="loading" ref="table" :data="data" border
                header-row-class-name="container-table-header"
                highlight-current-row class="current-page"
                :row-key="rowKeyMethod" size="small" stripe style="width: 100%;margin-bottom: 20px;"
                @row-click="handleRowClick">
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <el-table
              :data="props.row.projectPoints"
              style="width: 100%"
              :row-key="rowKeyMethod1"
            >
              <el-table-column label="审计疑点编号" prop="pointCode"></el-table-column>
              <el-table-column label="疑点描述" prop="pointDesc" show-overflow-tooltip></el-table-column>
              <el-table-column label="是否落实" prop="fix">
                <template slot-scope="scope">
                  <div v-if="Number(scope.row.fix) === 0">
                    <span>是</span>
                  </div>
                  <div v-else>
                    <span>否</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="形成问题" prop="discovery">
                <template slot-scope="scope">
                  <div v-if="Number(scope.row.discovery) === 0">
                    <span>是</span>
                  </div>
                  <div v-else>
                    <span>否</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="215">
                <template slot-scope="scope">
                  <el-button v-if="permissions.execute_doubtful_get" size="small" icon="el-icon-view" type="text" @click="showViewBox(scope.row,true)">查看
                  </el-button>
                  <el-button v-if="permissions.execute_doubtful_add" size="small" icon="el-icon-edit" type="text" @click="addOrUpdateHandle(scope.row,false)">编辑
                  </el-button>
                  <el-button v-if="permissions.auditevidence_add && !scope.row.evidenceId" @click="createEvidence(scope.row)" type="text" size="small" icon="el-icon-plus">创建取证单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" prop="projectCode">
        </el-table-column>
        <el-table-column label="审计项目名称" prop="projectName"></el-table-column>
        <el-table-column label="疑点数量" prop="pointCount"></el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          :current-page="page.current"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog top="5vh" :title="formTitle" :visible.sync="viewBox"
               :append-to-body="true" :before-close="closeViewBox" width="1200px">
      <DoubtfulView :params="form"></DoubtfulView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeViewBox" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>

    <table-form ref="addOrUpdate" @cancelDialog="closeDoubtfulDialog"></table-form>
    <EvidenceForm :evidenceDialog="evidenceDialog" @cancelDialog="closeEvidenceDialog" @setValue="evidenceDataHandle" ref="addEvidence"/>
  </basic-container>
</template>
<script>
import {mapGetters} from "vuex";
import TableForm from "@/components/form/doubtfulForm";
import EvidenceForm from "@/components/form/evidenceForm";
import {delObj, fetchList, getByPointId, getPoint, listPointByProjectId} from "@/api/adis/execute/point";
import DoubtfulView from "@/components/actForm/DoubtfulView.vue";
import ChoseProject from "@/components/audited/ChoseProject.vue";

export default {
  directives: {},
  components: {
    ChoseProject,
    DoubtfulView,
    TableForm,
    EvidenceForm
  },
  dictTypes: ['risk_rank'],
  data() {
    return {
      viewBox: false,
      formBox: false,
      formTitle: '',
      loading: false,
      evidenceDialog: false,
      query: {},
      form: {},
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      Authorization: '',
      fileList: [], // 文件
      expandedRows: [], // 记录已展开的行主键
    }
  },
  computed: {
    ...mapGetters(["permissions", "userInfo"])
  },
  created() {
    this.onLoad(this.page);
    this.Authorization = 'Bearer ' + this.$store.getters.access_token
  },
  methods: {
    createEvidence(row) {
      this.$nextTick(() => {
        this.$refs.addEvidence.init(row)
      })
    },
    handleRowClick(row, event) {
      this.query.projectId = row.projectId;

      listPointByProjectId(this.query).then(res => {
        this.$set(row, 'projectPoints', res.data.data);
        // 使用$refs调用toggleRowExpansion方法，但 Element UI 默认支持点击展开，此处可省略
        this.$refs.table.toggleRowExpansion(row,true);
        // this.$set(this, "expandedRow", row);
        this.data.forEach(item => {
          if (item !== row) {
            this.$refs.table.toggleRowExpansion(item,false);
          }
        })
      })
    },
    rowKeyMethod(row) {
      // 使用唯一的 id 字段作为 row-key
      return row.projectId;
    },
    rowKeyMethod1(row) {
      // 使用唯一的 id 字段作为 row-key
      return row.pointId;
    },
    handleCellClick(row, column) {
      if (row && column.label !== "操作"){
        this.showViewBox(row)
      }
    },
    // 新增 / 证据上传 / 疑点落实
    addOrUpdateHandle (row, type) {
      const Edit = row ? row : {};
      Edit.recordName = this.userInfo.username
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(Edit, type)
      })
    },
    closeDoubtfulDialog() {
      this.onLoad(this.page);
    },
    evidenceDataHandle(data){

    },
    closeEvidenceDialog() {
      this.onLoad(this.page);
    },
    showEditBox(row) {
      getPoint(row.projectId).then((res) => {
        this.form = res.data.data;
        if (res.data.data.fileUrl) {
          this.fileList.push({url: res.data.data.fileUrl});
        }
        const dateFields = ['audit', 'project', 'work', 'prepare', 'apply', 'finish'];

        dateFields.forEach(field => {
          const StartDate = this.form[`${field}StartDate`];
          const EndDate = this.form[`${field}EndDate`];
          this.form[`${field}Dates`] = []
          if (StartDate && EndDate) {
            this.form[`${field}Dates`].push(StartDate);
            this.form[`${field}Dates`].push(EndDate);
          }
        });
        console.log(this.form)
        this.formTitle = '编辑';
        this.formBox = true;
      });
    },

    showViewBox(row) {
      getByPointId(row.pointId).then(response => {
        this.form = response.data.data
        this.formTitle = row.projectName;
        this.viewBox = true;
      })
    },
    closeViewBox(){
      this.viewBox = false;
    },

    resetForm() {
      this.formBox = false;
      this.viewBox = false;
      this.form = {};
      this.formTitle = '';
      this.$refs['optForm'] && this.$refs['optForm'].resetFields();
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.handleRowClick(this.data[0]);
      }, () => {
        this.loading = false;
      });
    },
  }
};
</script>
